﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RoleListPage.aspx.cs" Inherits="Easy.Web.Pages.PrivilegePages.RoleListPage" %>

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head id="Head1" runat="server">
    <title></title>
    <link href="/_css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/_css/common.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="/_css/iconfont.css" />
    <script src="/_js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="/_js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/_js/json2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            getRoleList();

            //横向绑定，填充表头背景
            $("#roleList-title").parent().css({ "background": "#F5F6FA", "border-top": "1px solid #e1e6eb", "border-bottom": "1px solid #e1e6eb" });
            $("div.table-responsive").scroll(function () {
                var left = (-1) * $(this).scrollLeft();
                $("#roleList-title").css("left", left);
            });

        });

        function getRoleList() {
            $.ajax({
                url: "/Service/Privilege/GetRoleList.ashx",
                async: false,
                type: "post",
                dataType: "json",
                data: {
            },
            success: function (data, textStatus) {
                var SMShtml1 = "<table class='table table-hover'>"
                        + " <thead><tr><th>#</th><th>角色名称</th><th>所属部门"
                                           + "  </th><th>"
                                           + "操作</th>"
                                           + "</thead></table>";
                $("#roleList-title").html(SMShtml1);

                var SMShtml = "<table class='table table-hover'><tbody>";
            
                for (var i = 0; i < data.length; i++) {

                    var item = data[i];
                    SMShtml += "<tr  name='list' id=\"" + (i + 1) + "\">"
                    /*NO*/ + "<td>" + (i + 1) + "</td>"
                    + "<td  id=\"list" + (i + 1) + "\">" + item.Name + "</td>"
                    + "<td  id=\"list" + (i + 1) + "\">" + item.BusinessUnit + "</td>"
                  + "<td  id=\"list" + (i + 1) + "\"><button type='button' onclick='showDetail(\"" + item.RoleId + "\");' class='btn btn-primary ng-binding'>查看</button></td>"
                            + "</tr>";


                }


                SMShtml += "</tbody></table>";
                $("#roleList_div").html(SMShtml);

                //滚动table的高度
                var height = window.innerHeight - 183;
                $("#roleList_div").height(height);
            },
            error: function (data, textStatus) {
                alert("ajax错误");

            }

        });

    }



    function showDetail(id) {
        window.location = "RoleInfoPage.aspx?Id=" + id;
    }

    function btn_add() {
        window.location = "RoleInfoPage.aspx";
    }
    
    //滚动table高度响应
    $(window).resize(function () {
        var height = window.innerHeight - 183;
        $("#roleList_div").height(height);
    })
    </script>
    <style>
        .row{margin-right:0px;}
        .panel{border:none;}
        .page-header{margin:15px;}
         .page-header+.btn-default{margin:0px 15px 15px 5px;}
        .panel-heading{padding:3px 15px;height:40px;line-height:34px;}
        .panel{border:none;}
        .table{padding:0;margin:0;border:none;}
        #roleList-title .table th,.table td{width:345px;}
        #roleList-title .table th:first-child,.table td:first-child{width:112px}
        #roleList_div,#roleList-title{min-width:1147px;}
        .table-responsive{border:1px solid #e1e6eb;border-top:none;}     
        #roleList-title{position:relative;}
        #roleList-title thead tr th{border-bottom:none;}
        @media screen and (max-width: 767px){
            .table-responsive {
                margin-bottom:0px;
                border:none;
                overflow:auto;
                border:1px solid #e1e6eb;
                border-top:none;
            }
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">
                    角色列表
                    <button type='button' style="float: right" class='btn btn-primary ng-binding' onclick="btn_add();">
                            Add
                    </button>
                </h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    
                    <!-- /.panel-heading -->
                    <div class="panel-body">
                       <div class="table-responsive" style="overflow:hidden;border-bottom:none;">
                            <div id="roleList-title">
                            </div>
                        </div>
                        <div class="table-responsive">
                            <div id="roleList_div">
                            </div>
                        </div>
                        <!-- /.table-responsive -->
                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
        </div>
    </div>
    </form>


</body>
</html>
